<!--
 * @Description: 资料下载---- download_datum
 * @Author: your name
 * @Date: 2023-12-07
 * @LastEditTime: 2023-12-07
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="download_datum heart_w">
      <div class="container">
        <div class="course_item">
          <div class="course_title">
            <span>科目：</span>
          </div>
          <div class="content_list">
            <div
              v-for="(item, index) in 3"
              :key="item"
              @click="classify(index)"
            >
              <span :class="{ on: index_class == index }">CFA</span>
            </div>
          </div>
        </div>
        <div class="course_item">
          <div class="course_title">
            <span>二级分类：</span>
          </div>
          <div class="content_list">
            <div
              v-for="(item, index) in 3"
              :key="item"
              @click="data_sorting(index)"
            >
              <span :class="{ on: index_t == index }">Level II</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="curriculum_list">
        <div class="list_nav" v-for="item in downFlieListArr" :key="item.id">
          <div class="img_left_t">
            <img
              src="https://www.rongyuejiaoyu.com/static/material/assets/images/tubiao.png"
              alt=""
            />
            <div class="main_list">
              <p class="item_p">
                <span>{{ item.free_text }}</span>
                <span>{{ item.title }}</span>
              </p>
              <p>
                <span>{{ item.size }}</span>
                &nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;
                <span>下载数：{{ item.down_nums }}</span>
              </p>
            </div>
          </div>

          <a href="#" class="down_a" target="_blank">
            {{ item.button_text }}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDownFileList } from '@/api/download.js'
export default {
  name: 'download_datum',
  data() {
    return {
      index_t: 0,
      index_class: 0,
      class_val: false,
      downFlieListArr: []
    }
  },
  created() {
    console.log(this.$route.query)

    getDownFileList({ cate_id: 1 }).then(({ data: data }) => {
      this.downFlieListArr = data.data
      console.log(data, 222222222)
    })
  },
  methods: {
    data_sorting(i) {
      this.index_t = i
    },
    classify(index) {
      this.index_class = index
    },
    classifyState() {
      this.class_val = !this.class_val
    },
    down_sum() {
      console.log(321)
    }
  }
}
</script>

<style scoped lang="scss">
.on {
  color: #2c8eff;
  font-weight: bold;
}

.download_datum {
  margin-top: 30px;
}

.container {
  padding: 10px 20px 0 17px;
  border-radius: 4px;
  background-color: #ffffff;

  .course_item:last-child {
    .content_list:last-child {
      border-bottom: none;
    }
  }

  .course_item {
    display: flex;
    align-items: center;

    .course_title {
      font-size: 14px;
      line-height: 60px;
      color: #969696;
    }
  }
  .content_list {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    height: 60px;
    padding: 15px 103px 0 33px;
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: 1px dashed #efefef;

    div {
      height: 30px;
      margin-right: 30px;
      margin-bottom: 15px;
      line-height: 30px;
      font-size: 14px;
      color: #282828;

      span {
        cursor: pointer;
        user-select: none;
      }
    }
  }
}

.curriculum_list {
  margin: 30px 0;
  padding: 25px;
  background: #fff;

  .list_nav {
    line-height: 32px;
    padding: 15px 12px;

    &:nth-child(2n) {
      background-color: #faf9f9;
    }

    .down_a {
      margin-left: auto;
      width: 65px;
      padding: 5px 12px;
      height: 26px;
      background: linear-gradient(-90deg, #fa4e4e, #fd894f);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 10px;
      color: #fff;
    }
  }

  .list_nav,
  .img_left_t {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .main_list {
    margin-left: 20px;

    .item_p {
      font-size: 16px;
      line-height: 28px;

      span:first-child {
        background: #edfcf1;
        border-radius: 2px;
        border: 1px solid #b8e7c3;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 10px;
        padding: 0 8px;
        color: #46c564;
        margin-right: 5px;
      }

      & + p {
        font-size: 14px;
        color: #666;
      }
    }
  }
}
</style>
